<script setup>
  import taskApi from '@/apis/task.js'
  import {onMounted,ref} from 'vue'
  const list = ref([])
  const isTriggered = ref(false)
  let page = 1
  onMounted(async ()=>{
    let res = await taskApi.list()
    list.value = res.data.data.items
  })
  //触底加载更多
  async function onScrollToLower(){
    page++
    let res = await taskApi.list(1,page,10)
    if(res.data.data.items){
      list.value.push(...res.data.data.items)
    }
  }
  //下拉刷新
  async function onScrollViewRefresh(){
    page = 1
    isTriggered.value = true
    let res = await taskApi.list(1,page,10)
    list.value = res.data.data.items
    isTriggered.value = false
  }
</script>

<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view"
  @scrolltolower="onScrollToLower" @refresherrefresh="onScrollViewRefresh"
  :refresher-triggered="isTriggered">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="item in list" :key="item.id">
        <navigator hover-class="none" :url="'/subpkg_task/detail/index?id='+item.id">
          <view class="header">
            <text class="no">任务编号: {{item.transportTaskId}}</text>
            <!-- <text class="status">已延迟</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{item.startAddress}}</view
              >
              <view class="line">{{item.endAddress}}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{item.created}}</view>
          <navigator
            hover-class="none"
            :url="'/subpkg_task/pickup/index?id='+item.id"
            class="action"
            v-if="item.enablePickUp"
            >提货</navigator
          >
          <button hover-class="none" class="action"
            v-if="!item.enablePickUp" :disabled="!item.enablePickUp">提货</button>
        </view>
      </view>

      <view v-if="false" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
